import { reactive,computed } from 'vue'
import { extname } from '@u/tool'

const createFile = (f) => ({
    file: f,
    status: 'pending',
    progress: 0,
})

export const useUpload = (initFiles = [],exts,maxSize) => {
    const files = reactive([...initFiles.map(createFile)])
   
    const addFiles = (...args) => {
        args = args.filter(f => exts.includes(extname(f.name)) && f.size <= maxSize)
        files.push(...args.map(createFile))
    }

    const removeFile = (...args) => {
        for (const f of args) {
           const i = files.indexOf(f)
           files.splice(i,1)
           if(f.status === 'uploading'){
                f.abort();
           }
        }
    }
    
    const pendingFiles = computed(() => files.filter(f => f.status === 'pending'))

    // 上传文件
    const upload = () => {
       
    }
    return {
        files,
        addFiles,
        removeFile,
        pendingFiles,
        upload
    }
}


